<template>
  <div class="proseminarshow">
    <b-container>
      <img
        class="img-fluid mb-3"
        v-lazy="domain + special.banner"
      >
      <div
        v-for="item in show"
        :key="item.id"
      >
        <h5
          class="text-center my-3"
          v-for="set in item.setting"
          :key="set.id"
        >{{set}}</h5>
        <div class="card">
          <div class="card-header text-center">{{item.title}}</div>
          <div class="card-body">
            <div
              class="mb-2"
              v-for="list in item.list"
              :key="list.id"
            >
              <span v-if="list.before_title">{{list.before_title}}：</span>
              <a
                target="_blank"
                class="h5"
                v-if="list.url"
                :href="list.url"
                :title="list.title"
              >
                {{list.title}}
              </a>
              <router-link
                class="h5"
                v-else-if="list.news_id"
                :to="'/show/'+ list.news_id"
                :title="list.title"
                target="_blank"
              >
                {{list.title}}
              </router-link>
              <template v-else>{{list.title}}</template>
              <span v-if="list.author">{{list.author}}</span>
              <span v-if="list.post">{{list.post}}</span>
            </div>
          </div>
        </div>
      </div>
    </b-container>

  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "proseminarshow",
  data () {
    return {
      template: "",
      domain: process.env.VUE_APP_baseURL
    };
  },
  props: ["special"],
  created () {
    this.setShow({ id: this.$route.params.id });
  },
  computed: {
    ...mapState("special", ["show"])
  },
  methods: {
    ...mapActions("special", ["setShow"])
  }
};
</script>
<style scoped>
.img-fluid {
  width: 100%;
  max-height: 200px;
}
.container {
  background-color: #ffffff;
  padding-bottom: 1rem;
}
.proseminarshow {
  background-color: #973c3f;
}
</style>
